<template>
	<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
		class="demo-ruleForm" :size="formSize" status-icon>
		<el-form-item label="商品名称" prop="ProductName">
			<el-input v-model="ruleForm.ProductName" />
		</el-form-item>
		 <el-form-item label="图片" prop="ProductImg">
			<el-upload
    			 class="avatar-uploader"
   				 action="http://localhost:5242/api/images"
    			:show-file-list="false"
   			    :on-success="handleAvatarSuccess"
   			    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
		</el-form-item>
		<el-form-item label="材质" prop="Material">
			<el-input v-model="ruleForm.Material" />
		</el-form-item>
    
		<el-form-item label="大小" prop="Specifications">
			<el-input v-model="ruleForm.Specifications" />
		</el-form-item>	
		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">
				保存
			</el-button>
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
	import { ElMessage, ElNotification } from 'element-plus'

	import type { UploadProps } from 'element-plus'

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
	ruleForm.ProductImg = response.data[0]
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg'&&rawFile.type !== 'image/png') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

	import produapi from "@/api/produapi"

	const emit = defineEmits(['onSave'])

	interface RuleForm {
		ProductName : string		
		ProductImg: string	
		Material : string
        Specifications:string		
	}

	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = reactive<RuleForm>({
		ProductName: '',
		ProductImg:"",
		Material:'',
        Specifications:''

	})
		
	const rules = reactive<FormRules<RuleForm>>({
        ProductName: [
			{ required: true, message: '请输入商品名称', trigger: 'blur' },
			{ min: 2, max: 5, message: '2-5个字符', trigger: 'blur' },
		],		
		
	})

	const submitForm = async (formEl : FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				produapi.Add(ruleForm).then(res => {
					if (res.code == 1) {
						ElNotification({
							title: 'Success',
							message: '添加成功',
							type: 'success',
							duration: 800,		
						})
							emit("onSave", true)
					} else {
						ElNotification({
							title: 'Error',
							message: '失败',
							type: 'Error',
							duration: 800,
						})
					}
				}).catch(err => {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'Error',
						duration: 800,
					})
				})
			} else {
				console.log('error submit!', fields)
			}
		})
	}

	const resetForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
	}
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>